<template>
  <div class="mation">
      <!-- <p v-html="MationList"></p> -->
      <div>
        <img @click="onClick(5439)" src="@/assets/image/news1.jpg" alt="" />
        <img @click="onClick(5383)" src="@/assets/image/news2.jpg" alt="" />
        <img @click="onClick(5386)" src="@/assets/image/news3.jpg" alt="" />


        <a href="https://mp.weixin.qq.com/s/4GIO0f-5Zpm-ZImwwe35_w">
          <img src="@/assets/image/news4.jpg" alt="" />
        </a>

        <img @click="onClick(5357)" src="@/assets/image/news5.jpg" alt="" />

        <a href="https://mp.weixin.qq.com/s/PKXgAO-0ZRPKbpBxkA9LRA">
          <img src="@/assets/image/news6.jpg" alt="" />
        </a>

        <a href="https://mp.weixin.qq.com/s/HHdUPa4tjGYcU9ZGOoY2BA">
          <img src="@/assets/image/news7.jpg" alt="" />
        </a>

        <img @click="onClick(5423)" src="@/assets/image/news8.jpg" alt="" />
        
        <a href="https://mp.weixin.qq.com/s/N0shHqJTfQphPieM-DAGMQ">
          <img src="@/assets/image/news9.jpg" alt="" />
        </a>
      
        <img src="@/assets/image/end.jpg" alt="" /> 
      </div>
  </div>
</template>

<script>
import { reactive, toRefs } from '@vue/reactivity'
import {MationDataAPI} from '@/api/index.js'
import { onMounted } from '@vue/runtime-core';
import { useRouter } from 'vue-router';
export default {
  name:'Mation',
  setup(props) {
    const root = reactive({
      MationList:[]
    });

    const router = useRouter();
    const onClick = (id)=>{
      router.push(`/cinemas/${id}`)
    }
    
    // const MationData = async () =>{
    //   const {data:res} = await MationDataAPI()
     
    //   if (res.msg == 'ok') {
    //     root.MationList = res.data.data
    //     console.log(root.MationList);
    //   }
    // }
    //   onMounted(()=>{
    //   MationData()
    // })
    return {
      ...toRefs(root),
      onClick
    }
  
  }
}
</script>

<style scoped lang='less'>
a {
  height: 100%;
}
img {
  width: 100%;
}

</style>